import './index.scss'
import React from 'react'

import shu from '../../img/shu.png'

import you from '../../img/you.png'
import { createOrder } from '../../api/perOrder'
import { useNavigate, useLocation } from 'react-router-dom'
import { connect } from 'react-redux'
// import { createOrder } from '../../api/perOrder'
import { editCartAction } from '../../store/actions/cart.js'
const Order = (props) => {

    const location = useLocation()
    const { cartList, perOrderId, sum } = location.state
    const navigate = useNavigate()
    // const { editCartAction } = props

    const gotoOrder = () => {
        createOrder({
            'addressInfo': '联系地址******',
            'payway': 'wx微信支付',
            'allFee': sum,
            'discount': 0,
            'preOrderId': perOrderId
        }).then(res => {
            console.log('27', res);
            if (res.data.code === 666) {
                console.log('29', res);
                let list = res.data.result

                navigate('/pay', { state: list })
                // editCartAction(list)
            }

        })

    }

    return <div className="order-wrap">
        <div className="order-header">
            <div className='topBg'>

                <div> <span className='img-order'>＞</span>填写订单</div>
            </div>

        </div>
        <div className='order-title'>
            <div className='addwrap'>
                <div className='add-adress'>新建地址 <span className='img-lieht'>＞</span></div>
                <div className='adress-shu'><img src={shu} alt="" /></div>
            </div>
        </div>
        <div className='order-shopping'>
            {cartList.map(item => <div className='storeItem ' key={item.id}>
                <div className='leftCenter' >
                    <span className='bold'>H</span><span>荣耀自营</span>
                </div>
                <div className='itemBorder'>
                    <div className='goodsWrap'>
                        <div className='cartItem'>

                            <div className='itemCon '>
                                <div className='image'> <img src={item.pic} alt="" /></div>
                                <div className='text1'>
                                    <div className='titleCon'><div className='titleCon1'>{item.name}<span className='attaist'>￥{item.price}</span></div>
                                        <div className='titleCon2'>冰河银; i5|16GB|512GB;   <span className='attaty'>+{item.num}</span></div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>


            </div>)}
            <div className='rightArrow'>
                <div className='img-arr'><img src={you} alt="" />发票</div>
                <div className='fap'>电子普通发票个人＞</div>
            </div>

            <div className='rightArrow'>
                <div className='img-arr'><img src={you} alt="" />配送</div>
                <div className='peis'>今天21:59前付款，预计2023.05.26（周五）送达</div>
            </div>


            <div className='rightArrow'>
                <div className='img-arr'><img src={you} alt="" />优惠券</div>
                <div > 暂无可用</div>
            </div>
            <div className='card-wrap'>
                <div className='card-1'>
                    <div>商品金额</div>
                    <div>￥44433</div>

                </div>
                <div className='card-1'> <div>活动优惠</div>
                    <div>￥44433</div></div>
                <div className='card-1'> <div>运费</div>
                    <div>￥44433</div></div>
                <div className='card-1'><div>积分</div><div>5积分</div></div>
            </div>


        </div>
        <div className='order-footer'>

            <div className='order-price'><span>共计</span><span className='han1-price'>￥{location.state.sum}</span></div>


            <div className='order-handle' onClick={gotoOrder} >去结算2</div>
        </div>
    </div>
}
export default React.memo(connect(state => ({ cart: state.cart }), { editCartAction })(Order))